{include file="public/header" /}
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab-content">
            <blockquote class="layui-elem-quote">
                带 <span class="x-red">*</span> 为必填项<br>
                url不区分大小写，若由多个单词组成，全部小写即可。例：App/UserAdd写为app/useradd即可
            </blockquote>
            <form id="ruleFormData" class="layui-form layui-form-pane" autocomplete="off">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="ruleName" placeholder="请输入名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">上级菜单</label>
                    <div class="layui-input-block">
                        <select name="pid" id="nodeId" lay-filter="nodeId" lay-search>
                            <option value="">请选择</option>
                            <option value="0">无上级</option>
                            {volist name="node_list" id="vo"}
                            <option value="{$vo.id}">{$vo.name|raw}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required" id="nodeLabel">url</label>
                    <div class="layui-input-block">
                        <input type="text" name="rule" id="ruleUrl" placeholder="请输入url" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">菜单</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="is_menu" checked lay-text="是|否" lay-skin="switch">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="status" checked lay-text="启用|停用" lay-skin="switch">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" name="icon" class="layui-input" style="margin-bottom: 5px">
                        <!--<a href="javascript:;" onclick="lookIconStore()" class="icon-store"><span>查看图标库</span></a>-->
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" value="255" class="layui-input" placeholder="请输入排序，数字越小，排序越靠前">
                    </div>
                </div>

                <div class="btn-block">
                    <button type="button" onclick="sendRuleFormData()" class="layui-btn layui-btn-normal"><i class="fa fa-check"></i>提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i>重置</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

<script>
    var root = 0;//是否无上级 1：是 0否
    layui.use('form',function () {
        var $ = layui.jquery,
            form = layui.form;

        //监听下拉框选中
        form.on('select(nodeId)',function (data) {
            let checked = data.value;
            if (checked == 0) {
                root = 1;
                $("#nodeLabel").removeClass('layui-required');
                $("#ruleUrl").addClass('layui-disabled');
                $("#ruleUrl").attr('disabled','disabled');
            }else {
                root = 0;
                $("#nodeLabel").addClass('layui-required');
                $("#ruleUrl").removeClass('layui-disabled');
                $("#ruleUrl").removeAttr('disabled');
            }
        });

    });

    function sendRuleFormData() {
        let name = $("#ruleName").val();
        let parentId = $("#nodeId").val();
        let url = $("#ruleUrl").val();
        if (emptyCheck(name)) {
            hintMsg('名称不能为空', 'ruleName')
            return false;
        } else if (emptyCheck(parentId)) {
            hintMsg('请选择上级', 'nodeId')
            return false;
        } else if (root == 0 && emptyCheck(url)) {
            hintMsg('请输入url', 'ruleUrl')
            return false;
        }
        let data = $("#ruleFormData").serialize()
        //弹出遮罩层，防止多次点击
        var ruleAddLoad = layer.load(1, {shade: [0.5, '#FFF'], time: 0})
        ajaxRequest("{:url('rule/add')}", data, function (res) {
            if (res.code == 'suc') {
                sucMsg(res.msg, function () {
                    //刷新父级页面
                    xadmin.father_reload()
                    //关闭遮罩层
                    layer.close(ruleAddLoad)
                    //关闭当前弹出层
                    xadmin.close()
                })
            } else {
                errMsg(res.msg, function () {
                    //关闭遮罩层
                    layer.close(ruleAddLoad)
                })
            }
        })
    }
</script>
</html>